import React, { Suspense } from "react";

import routes from "./Router_config";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import { RouterList, RouterItem } from "../untils/index";
type Props = {};

const RouterView = (props: Props) => {
  const renderRouter = (arr: RouterList) => {
    return arr.map((item: RouterItem, index: number) => {
      return (
        <Route
          key={index}
          path={item.path}
          element={item.element?<item.element/>:<Navigate to={item.to as string}/>}
          // element={item.element ? <item.element/>:<Navigate  to={item.to as string}/>}
        >
          {item.children && renderRouter(item.children)}
        </Route>
      );
    });
  };
  return (
    <Suspense fallback={<div>路由加载中...</div>}>
      <BrowserRouter>
        <Routes>{renderRouter(routes)}</Routes>
      </BrowserRouter>
    </Suspense>
  );
};

export default RouterView;
